<template>
	<div class="rating">
		<section class="rating-title pl30rem pr30rem border-b20">
			<div class="title layout border-b ">
	 			<h3 class="fs32rem bold c333">体验评星</h3>
	 			<i class="iconfont icon-right2"></i>
	 		</div>
			<ul class="">
				<li class="layout border-b" v-for="item in starData">
					<div class="flex-left">
						<span class="fs30rem c333 mr10rem">{{ item.name }}:</span>
		 				<i class="iconfont icon-xingxing ml15rem orange" v-for = "i in item.score"></i>
					</div>
					<i class="iconfont icon-right2"></i>
				</li>
			</ul>
 		</section>
 		<section class="pl30rem pr30rem border-b20">
 			<div class="rating layout border-b">
				<h3 class="fs32rem c333 bold">用户评论</h3>
	 			<div class="">
	 				<span>好评度{{ commentsData.praise }}</span>
	 				<i class="iconfont icon-right2"></i>
	 			</div>
			</div>
			<div class="comment layout pt20rem pb20rem" v-if='commentsData.evaluates_count'>
				<button class="border circle-8" :class="{on:comments_type == 0}" @click="loadInitData('0')">全部({{ commentsData.evaluates_count.evaluate_count }})</button>
				<button  class="border circle-8" :class="{on:comments_type == 1}" @click="loadInitData('1')">好评({{ commentsData.evaluates_count.praise_count }})</button>
				<button  class="border circle-8" :class="{on:comments_type == 4}" @click="loadInitData('4')">有图({{ commentsData.evaluates_count.imgs_count }})</button>
			</div>
 		</section>
 		<section class="rating-content pl30rem pr30rem pb40rem pb100rem">
			<div class="layout-juscon mt30rem" v-for="item in data">
				<img class="user-img circle" :src="img_url + item.user_img" alt="">
				<div class="ml20rem flex_1"> 
					<div class="rating-title layout border-b pb30rem ">
						<div class="title-left">
							<div class="flex-left">
								<strong class="fs34rem c333 mr15rem">{{ item.user_name }}</strong>
								<span class="fs18rem white pt5rem pb5rem pl30rem pr10rem primary" v-if="item.growth_level == 1"></span>
								<span class="fs18rem white pt5rem pb5rem pl30rem pr10rem intermediate" v-if="item.growth_level == 2"></span>
								<span class="fs18rem white pt5rem pb5rem pl30rem pr10rem advanced" v-if="item.growth_level == 3"></span>
							</div>
						
							<p class="fs24rem c999 mt20rem">{{ item.goods_name }}</p>
						</div>
						<div class="">
							<p class="fs24rem c999 mb20rem align-center">{{item.addtime*1000,'yyyy-MM-dd'| formatDate  }}</p>
							<i class="iconfont icon-xingxing orange" v-for="i in item.scores"></i>
						</div>
					</div>
					<p class="fs30rem c333 bold pt30rem pb30rem">{{ item.content }}</p>
					<div class="img-list">
						<ul>
							<li v-for="items in item.image">
								<img class="responsive-img" :src="img_url + items" alt="">
							</li>
						</ul>
					</div>
				</div>			
			</div>
 		</section>

 		<footer class="footer bg-white layout">
			<div class="text-btn layout-juscon pl10rem pr10rem border-t">
				<router-link tag='span' to="#" class="fs24rem c666 pl15rem pr15rem">店铺</router-link>
				<span class="fs24rem c666 pl15rem pr15rem">联系卖家</span>
				<span class="fs24rem c666 pl15rem pr15rem">关注</span>
				<span class="fs24rem c666 pl15rem pr15rem">购物车</span>
			</div>
			<button class="bg-red white">立即支付</button>

		</footer>
	</div>
</template>

<script>
	import { getGoodsComments, getCommentsCount } from "@/api/goods-detail";
	import { formatDate } from "@/utils";
	export default{
		data()
		{
			return{
				commentsData  : [],
				starData      : [],
				data          : [],
				img_url       : process.env.IMG_URL,
				goods_id      : this.$route.query.id,
				comments_type : this.$route.query.type,
				page_index    : 1,
				page_size     : 10,
			}
		},
		filters:
		{
			formatDate(time,fmt){
				let date = new Date(time);
				return formatDate(date,fmt);
			}  
		},
		created()
		{
			this.loadData();
			this.loadStarData();
			this.loadComments();
		},
		methods:
		{
			loadData()
			{
				var params = {
					goods_id      : this.goods_id,
					comments_type : this.comments_type,
					page_index    : this.page_index++,
					page_size     : this.page_size
				}
				getGoodsComments(params).then( res => {
					console.log(res);
					this.data = res.data;
				})
			},
			loadStarData()
			{
				getStar(this.goods_id,'0').then(res =>{
					this.starData = res.data;
				})
			},
			loadComments()
			{
				getCommentsCount(this.goods_id).then( res => {
					this.commentsData = res.data;
				})
			},
			loadInitData(num)
			{
				this.comments_type = num;
				this.page_index = 1;
				this.loadData();
			}
		}
	}
</script>

<style lang="less">
	.rating{
		.title{
			height: 90/28rem;
			line-height: 90/28rem;
		}
		.rating-title{
			ul{
				li{
					height: 90/28rem;
					line-height: 90/28rem;
				}
			}
		}
		.rating{
			height: 90/28rem;
			line-height: 90/28rem;
		}
		.comment{
			button{
				border-color: #a3a3a3;
				width: 30%;
				height: 60/28rem;
				line-height: 60/28rem;
			}
			.on{
				border: 1px solid transparent;
				background-color: #ff0036;
				color: #fff;
			}
		}
		.rating-content{ 
			h3{
				height: 90/28rem;
				line-height: 90/28rem;
			}
			.user-img{
				width: 88/28rem;
				height: 88/28rem;
				object-fit: cover;
				border-radius: 50%;
			}
			.rating-title{
				.title-left{
					span{
						width: 124/28rem;
						height: 33/28rem;
						display: block;
					}
					.primary{
						background: url(../../assets/icon8.png)no-repeat center /100% 100%;
					}
					.intermediate{
						background: url(../../assets/icon10.png)no-repeat center /100% 100%;
					}
					.advanced{
						background: url(../../assets/icon9.png)no-repeat center /100% 100%;
					}
				}
			}
			.img-list{
				ul{
					display: grid;
					grid-template-columns: 1fr 1fr 1fr;
					grid-gap: 0.5rem;
				}
			}
			.comment-btn{
				border: 2px solid #666;
				display: block;
				margin:0 auto;
				margin-top: 40/28rem;
			}
		}
		.footer{
			height:100/28rem;
			line-height: 100/28rem; 
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			.text-btn{
				width: 70%;
				height: 100%;
				span{
					padding-top: 30/28rem;
					background-position: center 25%;
			        background-size: 42/28rem;
			        background-repeat: no-repeat;
			        &:nth-child(1){
					background-image: url(../../assets/icon1.png)
					}
					&:nth-child(2){
						background-image: url(../../assets/icon2.png)
					}
					&:nth-child(3){
						background-image: url(../../assets/icon3.png)
					}
					&:nth-child(4){
						background-image: url(../../assets/icon11.png)
					}
				}
				.on{
					&:nth-child(3){
						background-image: url(../../assets/details_star_img.png)
					}
				}
				
			}
			
			button{
				height: 100%;
				width: 30%;
			}
		}
	}
</style>
